<template>
	<view class="">
		<view class="bg" @touchmove.stop.prevent="moveHandle" @click="close">
		</view>
		<view class="shopDialog" :style="{height:dialogHeight + 'px'}">
			<view class="shopDialog-top" @touchmove.stop.prevent="moveHandle">
				<image :src="shopItem.imgUrl" mode=""></image>
				<view class="top-price">￥{{shopItem.price}}</view>
				<view class="top-param">{{shopItem.attrTxt}}</view>
				<view class="top-close" @click="close">
					<image class="imgV" src="./close.png"></image>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scroll">

				<!-- attrArr：属性数据 @click：属性选择事件 返回属性选择序列数组  -->
				<cc-radioBtnBox :attrArr="shopItem.attrArr" :selIndexArr="[0,0]"
					@click="selectAttrClick"></cc-radioBtnBox>
				<cc-numbox title="数量" :isSetMax="true" :maxNum="shopItem.maxNum" @change="numChangeClick"></cc-numbox>

			</scroll-view>
			<view class="shopDialog-bottom">
				<view class="shopDialog-bottom-item trolley" @click="toCart(shopItem)">
					加入购物车
				</view>
				<view class="shopDialog-bottom-item buy" @click="toBuy(shopItem)">
					立即购买
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {


			}
		},
		props: {

			// 当前选中
			shopItem: {
				type: Object,
				default: function() {
					return {
					'imgUrl': '', //图片地址
					'price': '', // 价格 通过计算得来
					 'attrTxt': '', //属性文本  通过计算得来
					'num': '', // 购买数量
					 'maxNum': '', // 购买最大数量
					
					// 属性数据
					'attrArr': [],
					'selAttrArr': [] ,//选择的属性序列数组
					// 价格字典 根据属性组合对应价格
					'priceDict':{}, 

				};
				}
			},
			dialogHeight: {

				type: [Number, String],
				default: 400
			}


		},
		mounted() {
			// 加载初始化 计算属性及价格
			this.getAttrTxt();
			this.getPrice();
		},
		methods: {

			// 获取价格（需根据自己实际情况计算）
			getPrice() {
				// 商品价格 等于商品数量乘以商品属性组合对应的价格
				this.shopItem.price = this.shopItem.num * this.shopItem.priceDict[this.shopItem.attrTxt];
			},
			// 获取选择的属性文本
			getAttrTxt() {

				let valueArr = this.shopItem.selAttrArr;
				var currentVal = []
				for (var i = 0; i < valueArr.length; i++) {
					currentVal.push(this.shopItem.attrArr[i]['value'][valueArr[i]]);
				}
				this.shopItem.attrTxt = currentVal.toString();
			},

			// 属性选择 返回属性选择序列
			selectAttrClick(valueArr) {

				console.log("选择属性的值 = " + valueArr);
				this.shopItem.selAttrArr = valueArr;

				this.getAttrTxt()
				this.getPrice();

			},
			// 数字输入框 返回数字值
			numChangeClick(num) {

				console.log("当前数量 = " + num);
				this.shopItem.num = num;

				this.getPrice();

			},
			toCart(item) {

				// 传送shopItem值
				this.$emit("toCart", item);

			},
			toBuy(item) {
				// 传送shopItem值
				this.$emit("toBuy", item);

			},
			close() {
				this.$emit('close')
			},




		}
	}
</script>

<style scoped>
	.imgV {
		width: 24px;
		height: 24px;
	}

	.shop-param-list {
		margin: 0 30rpx;
		clear: both;
	}

	.shop-param-title {
		font-size: 28rpx;
		color: #999;
		margin-bottom: 15rpx;
	}

	.shop-param-item {
		height: 70rpx;
		padding: 0 30rpx;
		border: 1rpx solid #e5e5e5;
		float: left;
		font-size: 24rpx;
		margin-right: 30rpx;
		margin-bottom: 15rpx;
		line-height: 70rpx;
		color: #666;
	}

	.activeBtn {
		border: 1rpx solid #00C3F5;
		color: #00C3F5;
	}

	.bg {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		top: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.scroll {
		position: absolute;
		top: 220rpx;
		bottom: 90rpx
	}

	.shopDialog {
		height: 400rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 11;
	}

	.shopDialog-top {
		height: 180rpx;
		position: relative;
		border-bottom: 1rpx solid #e5e5e5;
	}

	.shopDialog-top image {
		width: 210rpx;
		height: 210rpx;
		position: absolute;
		top: -60rpx;
		left: 30rpx;
		border: 1px solid #e5e5e5;
		box-sizing: border-box;
	}

	.top-price {
		font-size: 36rpx;
		color: #f0415f;
		margin-left: 280rpx;
		line-height: 50rpx;
		margin-top: 20rpx;
	}

	.top-price text {
		font-size: 24rpx;
		color: #999;
		text-decoration: line-through;
	}

	.top-param {
		font-size: 24rpx;
		margin-left: 280rpx;
		padding-right: 30rpx;
	}

	.top-close {
		position: absolute;
		top: 0;
		right: 30rpx;
	}

	.shopDialog-bottom {
		position: absolute;
		bottom: 0;
		height: 90rpx;
		display: flex;
		width: 100%;
	}

	.shopDialog-bottom-item {
		width: 50%;
		text-align: center;
		line-height: 90rpx;
		height: 90rpx;
		font-size: 28rpx;
		color: #fff;
	}

	.shopDialog-bottom-item.trolley {
		background: #0BBBEF;
	}

	.shopDialog-bottom-item.buy {
		background: #007AFF;
	}
</style>